<template>
  <div >
    <!-- use with components - bidirectional data binding（双向数据绑定） -->
    <quill-editor ref="myTextEditor"
                  v-model="content"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
    </quill-editor>

  </div>
</template>
<script type="text/javascript">
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillRedefine} from 'vue-quill-editor-upload'
  import {UploadDownload} from '@/utils/request.js'
  export default {
    props: ['currentRow'],
    components: {
      'quill-editor': quillEditor
    },
    data () {
      return {
        content: this.currentRow.projectDetail,
        editorOption: {
          // something config
        }
      }
    },
    // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      onEditorBlur (editor) {
//        console.log('editor blur!', editor)
      },
      onEditorFocus (editor) {
//        console.log('editor focus!', editor)
      },
      onEditorReady (editor) {
//        console.log('editor ready!', editor)
      },
      onEditorChange ({ editor, html, text }) {
        // console.log('editor change!', editor, html, text)
        this.content = html
      },
      getContent () {
        return this.content
      }
    },
    // if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
    // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
    computed: {
      editor () {
        return this.$refs.myTextEditor.quillEditor
      }
    },
    mounted () {
      console.log(this.currentRow)
    },
    created () {
//      let cThis = this
      this.content = this.currentRow.projectDetail
      console.log(this.content)
      console.log(this.currentRow)
      console.log(this.content)
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action: UploadDownload.upload,  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (response) => {
              console.log(response)
              return response.data.fileFtpPath
            },
            methods: 'POST',  // 可选参数 图片上传方式  默认为post
            token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
            name: 'file',  // 可选参数 文件的参数名 默认为img
            size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
            // start: function (){}
            start: () => {
            },  // 可选参数 接收一个函数 开始上传数据时会触发
            end: () => {
            },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
            success: (data) => {
              console.log(data)
            },  // 可选参数 接收一个函数 上传数据成功时会触发
            error: () => {
            }  // 可选参数 接收一个函数 上传数据中断时会触发
          },
          // 以下所有设置都和vue-quill-editor本身所对应
          placeholder: '',  // 可选参数 富文本框内的提示语
          theme: '',  // 可选参数 富文本编辑器的风格
          handlers: {
//            'indent': function (value) {
//              console.log(value)
//              let qill = cThis.$refs.myTextEditor.quill
//              let addRange = qill.getSelection()
//              qill.insertText(addRange, '&nbsp;')
//              console.log(addRange)
//            }
          }  // 可选参数 重定义的事件，比如link等事件
        }
      )
    }
  }
</script>
<style>
  .quill-editor {
    height: 510px;
  }
  .ql-container {
    height: 435px;
  }
</style>
